<template>
  <div>
	  <!-- 搜索 -->
	<el-col :span="12" class="grid">
		<el-input v-model="input" placeholder="请输入搜索内容"></el-input>
	</el-col>
	<el-col :span="3" class="grid" :gutter="1">
		<el-button type="success" icon="el-icon-search">搜索</el-button>
	</el-col>
    <!-- 表格 -->
    <el-table :data="xj.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="550" border style="width: 100%">
      <el-table-column prop="class" label="班级" width="180">
      </el-table-column>
    <el-table :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%" max-height="450">
	  <el-table-column prop="id" label="ID" width="100">
	  </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="class" label="班级" width="180">
      </el-table-column>
      <el-table-column prop="address" label="学分">
      </el-table-column>
      <el-table-column prop="discipline" label="违纪情况">
      </el-table-column>
      <el-table-column prop="basc" label="严重情况">
      </el-table-column>
      <el-table-column prop="eval" label="学生评价">
      </el-table-column>
      <!-- 右侧编辑 -->
      <el-table-column label="操作" width='180'>
        <template slot-scope="scope">
          <el-button size="mini" @click="UP(scope.$index,scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, xj)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-table>
    <!-- 弹出修改 -->
    <el-dialog title="信息修改" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" class="edit-form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="ID" prop="id">
          <el-input v-model="ruleForm.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="ruleForm.class"></el-input>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="违纪情况">
          <el-input v-model="ruleForm.discipline"></el-input>
        </el-form-item>
        <el-form-item label="严重情况">
          <el-input v-model="ruleForm.basc"></el-input>
        </el-form-item>
        <el-form-item label="学生评价" prop="eval">
          <el-select v-model="ruleForm.eval">
            <el-option label="优秀" value="优秀"></el-option>
            <el-option label="良好" value="良好"></el-option>
            <el-option label="合格" value="合格"></el-option>
            <el-option label="差" value="差"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页器 -->
    <div class="tb">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="prev,pager, next" :total='xj.length'></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Index: "",
      xj: [],
      input: "",
      //分页参数
      total: this.total,
      currentPage: 1, //当前页数
      pageSize: 9, //每页显示条数
      // tableData: Array(20).fill(item),
      dialogVisible: false,
      ruleForm: {
        id: "",
        name: "",
        eval: "",
        address: "",
        class: "",
        discipline: "",
        basc: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 5,
            message: "长度在 2 到 5 个字符",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "",
            trigger: "change",
          },
        ],
        credit: [
          {
            required: true,
            message: "请输入学分",
            trigger: "blur",
          },
        ],
        class: [
          {
            required: true,
            message: "请输入班级",
            trigger: "blur",
          },
        ],
        wj: [
          {
            required: true,
            message: "请输入违纪情况",
            trigger: "blur",
          },
        ],
        yz: [
          {
            required: true,
            message: "请输入严重情况",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    del(index, rows) {
      /* 删除 */
      var newPage = index + (this.currentPage - 1) * this.pageSize;
      rows.splice(newPage, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    /* 编辑 */
    UP(index, row) {
      //获取index
      this.Index = index;
      this.dialogVisible = true;
      this.ruleForm = Object.assign({}, row); //将数据传入dialog页面
      // console.log(index);
    },
    updata() {
      this.dialogVisible = false;
      this.xj[this.Index] = this.ruleForm;
      this.ruleForm = {
        name: "",
        eval: "",
        address: "",
        class: "",
        discipline: "",
        basc: "",
      };
    },
    getdata() {
      this.mysqlser
        .get("/allstudents")
        .then((res) => {
          console.log(res.data);
          this.xj = res.data;
        })
        .catch((err) => console.log(err));
    },
  },
  beforeMount() {
    console.log(this.ruleForm);
  },
  mounted() {
    this.getdata();
  },
  computed: {
    tables() {
      const input = this.input;
      if (input) {
        console.log("input输入的搜索内容：" + this.input);
        return this.xj.filter((data) => {
          console.log("object:" + Object.keys(data));
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(input) > -1;
          });
        });
      }
      return this.xj;
    },
  },
};
</script>

<style scoped="scoped">
.el-pagination {
  padding: 15px 5px;
}

.tb {
  background-color: #fff;
}
</style>
